<template>
  <div class="Work">
    <div class="work-left">
      <div class="work-left-top">
        <div class="w-LP-top">
          <img src="@/assets/images/avatar.jpg" alt="" />
          <div>
            <span>
              {{
                teacherStore.teacherInfo
                  ? teacherStore.teacherInfo.username
                  : 'teacher'
              }}
            </span>
            <span>身份：教师</span>
          </div>
        </div>
        <div class="work-line"></div>
        <div class="w-LP-bottom">
          <div style="margin-bottom: 10px">
            <span>上次登录时间：</span>
            <span>
              {{ new Date().toLocaleDateString('zh-CN').replace(/\//g, '.') }}
            </span>
          </div>
          <div>
            <span>上次登录地点：</span>
            <span>武汉</span>
          </div>
        </div>
      </div>
      <div class="work-left-bottom">
        <div class="w-LB-top">选课分析</div>
        <div class="w-LB-content">
          <div>
            <span>自然科学与工程类</span>
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="81.3"
              status="exception"
            />
          </div>
          <div>
            <span>人文社科</span>
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="58.4"
            />
          </div>
          <div>
            <span>艺术</span>
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="42.5"
              status="success"
            />
          </div>
          <div>
            <span>经济管理</span>
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="33.8"
              status="warning"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="work-right">
      <div class="work-right-top">
        <div class="w-RT-content">
          <div class="w-RTC-top">
            <span>学生的大模型功能使用数</span>
            <el-tag type="success">月</el-tag>
          </div>
          <div class="w-RTC-content">
            <span>№：3200</span>
            <svgIcon name="ai" size="50"></svgIcon>
          </div>
        </div>
        <div class="w-RT-content">
          <div class="w-RTC-top">
            <span>学生的文本功能使用数</span>
            <el-tag type="success">月</el-tag>
          </div>
          <div class="w-RTC-content">
            <span>№：2483</span>
            <svgIcon name="text" size="50"></svgIcon>
          </div>
        </div>
        <div class="w-RT-content">
          <div class="w-RTC-top">
            <span>学生的选课功能使用数</span>
            <el-tag type="success">月</el-tag>
          </div>
          <div class="w-RTC-content">
            <span>№：809</span>
            <svgIcon name="selectClass" size="50"></svgIcon>
          </div>
        </div>
        <div class="w-RT-content">
          <div class="w-RTC-top">
            <span>学生的面试功能使用数</span>
            <el-tag type="success">月</el-tag>
          </div>
          <div class="w-RTC-content">
            <span>№：1842</span>
            <svgIcon name="interview" size="50"></svgIcon>
          </div>
        </div>
      </div>
      <div class="work-right-bottom">
        <div class="work-TB-top">
          <span>教师功能</span>
        </div>
        <div class="work-TB-content">
          <div style="width: 100%">
            <el-button
              @click="handleSignIn"
              plain
              type="success"
              style="width: 100%"
              size="large"
            >
              发起签到
            </el-button>
          </div>
          <div style="width: 100%; margin: 20px 0">
            <el-button
              @click="handleEnter"
              plain
              type="primary"
              style="width: 100%"
              size="large"
            >
              学生平时加分
            </el-button>
          </div>
          <div style="width: 100%">
            <el-button
              @click="handleGrade"
              plain
              type="warning"
              style="width: 100%"
              size="large"
            >
              学生成绩分析
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" align-center title="签到的设置">
      <el-form ref="formRef" :rules="rules" size="large" :model="formData">
        <el-form-item label="签到标题：" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请输入签到的标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="签到时间：" prop="time">
          <el-select v-model="formData.time" placeholder="请选择签到时间">
            <el-option label="1分钟" value="1" />
            <el-option label="5分钟" value="5" />
            <el-option label="10分钟" value="10" />
            <el-option label="20分钟" value="20" />
            <el-option label="30分钟" value="30" />
            <el-option label="1小时" value="60" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="margin-right: 10px" @click="handleCancel">
            取消
          </el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref } from 'vue'
// 引入用户相关的小仓库
import useTeacherStore from '@/store/modules/teacher'
import { useRouter } from 'vue-router'

const router = useRouter()
const teacherStore: any = useTeacherStore()
const emit = defineEmits(['SignIn'])
// 控制对话框的显示与隐藏
const dialogVisible = ref(false)
// 表单的ref
const formRef = ref<any>(null)
// 签到表单数据
const formData = ref({
  title: '',
  time: '',
})

// 表单校验规则
const rules = {
  title: [{ required: true, message: '签到标题不能为空', trigger: 'blur' }],
  time: [{ required: true, message: '签到时间不能为空', trigger: 'change' }],
}

// 点击取消签到按钮的回调
const handleCancel = () => {
  formRef.value.resetFields()
  dialogVisible.value = false
}

// 点击确定签到按钮的回调
const handleConfirm = async () => {
  await formRef.value.validate()
  dialogVisible.value = false
  //传递给父组件
  emit('SignIn', formData.value)
  formRef.value.resetFields()
}

// 点击签到按钮的回调
const handleSignIn = () => {
  dialogVisible.value = true
}

// 点击学生成绩录入按钮的回调
const handleEnter = () => {
  router.push('/grade?toogle=0')
}

// 点击学生成绩分析按钮的回调
const handleGrade = () => {
  router.push('/grade?toogle=1')
}
</script>

<style lang="scss" scoped>
.Work {
  min-height: 100%;
  padding: 20px;
  background-color: #f2f2f2;
  display: flex;

  & > .work-left {
    margin-right: 20px;

    & > .work-left-top {
      margin-bottom: 20px;
      top: 0;
      padding: 30px 20px;
      background-color: #fff;

      & > .w-LP-top {
        display: flex;
        align-items: center;

        & > img {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          margin-right: 50px;
        }
        & > div {
          display: flex;
          flex-direction: column;

          :first-child {
            font-size: 25px;
            font-weight: 600;
            margin-bottom: 5px;
          }
          :last-child {
            font-size: 14px;
            color: #bfbfbf;
          }
        }
      }

      & > .work-line {
        width: 100%;
        height: 2px;
        margin: 20px 0;
        background-color: #ccc;
      }

      & > .w-LP-bottom {
        color: #b3b3b3;

        & > div {
          white-space: nowrap;

          :nth-child(n) {
            margin-right: 100px;
          }
        }
      }
    }

    & > .work-left-bottom {
      background-color: #fff;

      & > .w-LB-top {
        padding: 20px;
        border-bottom: 1px solid #d9d9d9;
      }

      & > .w-LB-content {
        padding: 20px;
        min-height: calc(100vh - 432px);

        & > div {
          padding-bottom: 20px;

          & > span {
            display: block;
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  & > .work-right {
    width: 100%;

    & > .work-right-top {
      display: grid;
      gap: 20px;
      margin-bottom: 20px;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

      & > .w-RT-content {
        font-size: 14px;
        background-color: #fff;

        & > .w-RTC-top {
          display: flex;
          padding: 20px;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #ccc;

          & > span {
            font-weight: 600;
          }
        }

        & > .w-RTC-content {
          display: flex;
          padding: 20px;
          align-items: center;
          justify-content: space-between;
        }
      }
    }

    & > .work-right-bottom {
      background-color: #fff;

      & > .work-TB-top {
        padding: 20px;
        border-bottom: 1px solid #ccc;
      }

      & > .work-TB-content {
        padding: 20px;
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 502px);
      }
    }
  }
}
:deep(.el-button + .el-button) {
  margin-left: 0;
}
</style>
